<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script src="js/china.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="jquery/jquery-3.1.1.min.js"></script>
		<script src="js/vue-resource.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>

		<script src="js/commom.js"></script>
		<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=Ps1AMzreya9bsECpN81hwxTbZ3t0GCeS">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script> -->

		<script src="js/vue.js"></script>
		<title>顺和物联统一调度平台2</title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/asidenav.css">
	</head>

	<body>
		<div class="ball">
			<svg width="0" height="0">
				<defs>
					<filter id="goo">
						<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
						<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
							result="goo"></feColorMatrix>
						<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
					</filter>
				</defs>
			</svg>
			<div class="aside-nav bounceInUp animated" id="aside-nav">
				<label for="" class="aside-menu" title="按住拖动">菜单</label>
				<a href="#" onclick="index()" title="首页" class="menu-item menu-first">首页</a>
				<a href="#" onclick="order()" title="订单" class="menu-item menu-second">订单</a>
				<a href="#" onclick="car()" title="车辆" class="menu-item menu-third">车辆</a>
			</div>
		</div>

		<script>
			function index() {
				window.location.href = "index.html"
			}

			function order() {
				window.location.href = "order.html"
			}

			function car() {
				window.location.href = "driver.html"
			}
		</script>
		<script src="js/asidenav.js"></script>

		<script>
			window.alert = function(msg) {
				var zIndex = 999999; //修改弹出层z-index,应为最顶层,避免被覆盖
				var desColor = '#1f0000' //提示信息字体颜色
				var buttonVal = '确定'; //确定按钮名称
				var btnBgColor = '#f61717'; //确定按钮背景颜色
				var btnColor = '#fff'; //确定按钮字体颜色
				var btnAlign = 'right'; //按钮在水平位置,默认居中,变量值:left,center,right
				var style = ``;

				var head = document.getElementsByTagName('head')[0];
				head.innerHTML += style //头部加入样式,注意不可使用document.write()写入文件,否则出错

				const body = document.getElementsByTagName('body')[0];

				var alertMask = document.createElement('div');
				var alertContainer = document.createElement('div');
				var alertDes = document.createElement('div');
				var alertConfirmParent = document.createElement('div');

				body.append(alertMask);
				alertMask.classList.add('alertMask');
				alertMask.classList.add('box-sizing');
				alertMask.append(alertContainer);
				alertContainer.classList.add('alertContainer');
				alertContainer.classList.add('box-sizing');
				alertContainer.append(alertDes);
				alertDes.classList.add('alertDes');
				alertDes.classList.add('box-sizing');

				alertDes.innerHTML = msg; //加载提示信息
				//关闭当前alert弹窗
				setTimeout(function alertBtnClick() {
					body.removeChild(alertMask);
					maskStyle = head.getElementsByClassName('mask-style')[0];
					head.removeChild(maskStyle); //移除生成的css样式
				}, 5000)

				function alertBtnClick() {
					body.removeChild(alertMask);
					maskStyle = head.getElementsByClassName('mask-style')[0];
					head.removeChild(maskStyle); //移除生成的css样式
				}
			}
		</script>
		<div class="page" id="page">
			<div class="title">
				<div class="titleTxt">顺和物联统一调度平台2</div>
				<div class="time">
					<div id="showTime"></div>
					<script type="text/javascript">
						function showLocale(objD) {
							var str, colorhead, colorfoot;
							var yy = objD.getYear();
							if (yy < 1900) yy = yy + 1900;
							var MM = objD.getMonth() + 1;
							if (MM < 10) MM = '0' + MM;
							var dd = objD.getDate();
							if (dd < 10) dd = '0' + dd;
							var hh = objD.getHours();
							if (hh < 10) hh = '0' + hh;
							var mm = objD.getMinutes();
							if (mm < 10) mm = '0' + mm;
							var ss = objD.getSeconds();
							if (ss < 10) ss = '0' + ss;
							var ww = objD.getDay();
							str = yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
							return str;
						}

						function tick() {
							var today;
							today = new Date();
							document.getElementById("showTime").innerHTML = showLocale(today);
							window.setTimeout("tick()", 1000);
						}
						tick();
					</script>
				</div>
			</div>
			<div class="content" id="listData">
				<div class="contentLeft">
					<div class="contentLeftTop">
						<span class="contentLeftTopTitle">总订单量走势图</span>
						<div id="order"></div>
						<script type="text/javascript">
							var dom = document.getElementById("order");
							var myChart1 = echarts.init(dom);
							option1 = {
								tooltip: {
									trigger: 'axis'
								},
								legend: {
									data: ['运输', '仓储', '同城配送'],
									y: '0',
									textStyle: {
										color: '#fff'
									}
								},
								grid: {
									top: '16%',
									left: '2%',
									right: '8%',
									bottom: '2%',
									containLabel: true
								},
								xAxis: {
									name: '天',
									nameTextStyle: {
										color: "#fff"
									},
									type: 'category',
									boundaryGap: true,
									axisLine: {
										lineStyle: {
											type: 'solid',
											color: '#ccc', //左边线的颜色
											width: '1' //坐标线的宽度
										},
										symbol: ['none', 'arrow']
									},
									axisLabel: {
										textStyle: {
											color: '#fff', //坐标值得具体的颜色
										},
									},
									data: []
								},
								yAxis: {
									name: '订单量(单)',
									nameTextStyle: {
										color: "#fff"
									},
									type: 'value',
									min: 0,
									splitNumber: 3,
									axisLine: {
										lineStyle: {
											type: 'solid',
											color: '#ccc', //左边线的颜色
											width: '1' //坐标线的宽度
										},
										symbol: ['none', 'arrow']
									},
									axisLabel: {
										textStyle: {
											color: '#fff', //坐标值得具体的颜色
										}
									},
									splitLine: {
										show: true,
										lineStyle: {
											type: 'dotted',
											color: '#666'
										},
									}
								},
								series: [{
									name: '运输',
									type: 'line',
									stack: '总量1',
									itemStyle: {
										normal: {
											color: "#f0be25",
											lineStyle: {
												color: "#f0be25"
											} /*折线颜色更改*/
										}
									},
									data: []
								}, {
									name: '仓储',
									type: 'line',
									stack: '总量2',
									data: []
								}, {
									name: '同城配送',
									type: 'line',
									stack: '总量3',
									itemStyle: {
										normal: {
											color: "#0bb3f1",
											lineStyle: {
												color: "#0bb3f1"
											} /*折线颜色更改*/
										}
									},
									data: []
								}, ]
							};
							if (option1 && typeof option1 === "object") {
								myChart1.setOption(option1, true);
							}
							myChart1.setOption(option1);
							/*窗口自适应，关键代码*/
							$(window).resize(function() {
								myChart1.resize();
							});

							function getData() {
								$.ajax({
									/***********初始化获取全部设备坐标********/
									url: API_SERVER_URL + "order_trend",
									type: 'POST',
									datatype: 'jsonp',
									// data: '',
									success: function(data) {
										//console.log(data)
										myChart1.setOption({
											xAxis: {
												data: data.echatX
											},
											series: [{
												name: '运输',
												data: data.transportList
											}, {
												name: '仓储',
												data: data.storageList
											}, {
												name: '同城配送',
												data: data.distributList
											}]
										})
									},
									error: function(e) {}
								})
							}
							setInterval(getData, 10000); //定时器
							getData();
						</script>
					</div>
					<div class="contentLeftMiddle">
						<span class="contentLeftBottomTitle">各省货量订单量总合计</span>
						<div id="zhanbi"></div>
						<script type="text/javascript">
							var dom = document.getElementById("zhanbi");
							var myChart3 = echarts.init(dom);
							option3 = {
								tooltip: {
									trigger: 'item',
									formatter: "{a} <br/>{b}: {c} ({d}%)"
								},
								series: [{
									name: '合计',
									type: 'pie',
									radius: '68%',
									center: ['50%', '50%'],
									selectedMode: 'single',
									avoidLabelOverlap: true,
									label: {
										normal: {
											show: true,
											textStyle: {
												color: '#fff',
												fontSize: "12"
											},
											formatter: '{b}:{d}%',
											padding: [0, -10],
										},
										emphasis: {
											show: true,
											textStyle: {
												fontSize: '15',
												fontWeight: 'bold'
											},
										}
									},
									labelLine: { //指示线状态
										show: true,
										smooth: 0,
										length: 8,
										length2: 30
									},
									itemStyle: {},
									data: []
								}]
							};;
							if (option3 && typeof option3 === "object") {
								myChart3.setOption(option3, true);
							}
							myChart3.setOption(option3);
							/*窗口自适应，关键代码*/
							$(window).resize(function() {
								myChart3.resize();
							});

							function getData() {
								$.ajax({
									/***********初始化获取全部设备坐标********/
									url: API_SERVER_URL + "order_percent",
									type: 'POST',
									datatype: 'jsonp',
									success: function(data) {
										var result = data.data
										var names = []; //定义两个数组
										var nums = [];
										$.each(result, function(key, values) { //此处我返回的是list<String,map<String,String>>循环map
											names.push(values.name);
											var obj = new Object();
											obj.name = values.name;
											obj.value = values.value;
											nums.push(obj);
										});
										myChart3.setOption({ //加载数据图表
											series: {
												// 根据名字对应到相应的系列
												name: ['合计'],
												data: nums
											}
										});
									},
									error: function(e) {}
								})
							}
							setInterval(getData, 10000); //定时器
							getData();
						</script>
					</div>
					<div class="contentLeftBottom">
						<span class="contentLeftTopTitle">交易趋势</span>
						<div id="jiaoyi"></div>
						<script type="text/javascript">
							var dom = document.getElementById("jiaoyi");
							var myChart2 = echarts.init(dom);
							option2 = {
								tooltip: {
									trigger: 'axis'
								},
								legend: {
									data: ['运单数量(单)', '结算金额(元)'],
									y: '0',
									textStyle: {
										color: '#fff'
									}
								},
								grid: {
									top: '16%',
									left: '2%',
									right: '8%',
									bottom: '2%',
									containLabel: true
								},
								xAxis: {
									name: '月',
									nameTextStyle: {
										color: "#fff"
									},
									type: 'category',
									boundaryGap: true,
									axisLine: {
										lineStyle: {
											type: 'solid',
											color: '#ccc', //左边线的颜色
											width: '1' //坐标线的宽度
										},
										symbol: ['none', 'arrow']
									},
									axisLabel: {
										textStyle: {
											color: '#fff', //坐标值得具体的颜色
										},
									},
									data: []
								},
								yAxis: {
									name: '',
									nameTextStyle: {
										color: "#fff"
									},
									type: 'value',
									min: 0,
									splitNumber: 3,
									axisLine: {
										lineStyle: {
											type: 'solid',
											color: '#ccc', //左边线的颜色
											width: '1' //坐标线的宽度
										},
										symbol: ['none', 'arrow']
									},
									axisLabel: {
										textStyle: {
											color: '#fff', //坐标值得具体的颜色
										}
									},
									splitLine: {
										show: true,
										lineStyle: {
											type: 'dotted',
											color: '#666'
										},
									}
								},
								series: [{
									name: '运单数量(单)',
									type: 'bar',
									stack: '总量1',
									barWidth: 20,
									itemStyle: {
										normal: {
											color: "#f0be25",
											lineStyle: {
												color: "#f0be25"
											} /*折线颜色更改*/
										}
									},
									data: []
								}, {
									name: '结算金额(元)',
									type: 'line',
									stack: '总量2',
									data: []
								}]
							};
							if (option2 && typeof option2 === "object") {
								myChart2.setOption(option2, true);
							}
							myChart2.setOption(option2);
							/*窗口自适应，关键代码*/
							$(window).resize(function() {
								myChart2.resize();
							});

							function getData() {
								$.ajax({
									/***********初始化获取全部设备坐标********/
									url: API_SERVER_URL + "order_trading",
									type: 'POST',
									datatype: 'jsonp',
									success: function(data) {
										myChart2.setOption({
											xAxis: {
												data: data.echatX
											},
											series: [{
												name: '运单数量(单)',
												data: data.ordernums
											}, {
												name: '结算金额(元)',
												data: data.chargeList
											}]
										})
									},
									error: function(e) {}
								})
							}
							setInterval(getData, 10000); //定时器
							getData();
						</script>
					</div>
				</div>
				<div class="contentMiddle">
					<div class="top">
						<div class="topLeft">
							<div class="topTitle">当日累计订单量<span class="txts" id="total_num"></span>/单</div>
							<div class="topCon">
								<div>
									<span>运输订单</span>
									<span class="txt" id="transport_num"></span>
								</div>
								<div>
									<span>仓储订单</span>
									<span class="txt" id="storage_num"></span>
								</div>
								<div>
									<span>同城配送订单</span>
									<span class="txt" id="distribut_num"></span>
								</div>
							</div>
						</div>
						<div class="topRight">
							<div class="topTitle">当日累计交易额<span class="txts" id="total_price"></span>/元</div>
							<div class="topCon">
								<div>
									<span>运输交易额</span>
									<span class="txt" id="transport_price"></span>
								</div>
								<div>
									<span>仓储交易额</span>
									<span class="txt" id="storage_price"></span>
								</div>
								<div>
									<span>同城配送交易额</span>
									<span class="txt" id="distribut_price"></span>
								</div>
							</div>
						</div>
					</div>
					<script>
						function orderNum() { //初始化地图
							$.ajax({
								/***********初始化获取全部设备坐标********/
								url: API_SERVER_URL + "order_amount",
								type: 'POST',
								datatype: 'jsonp',
								success: function(data) {
									// console.log(data)
									document.getElementById("total_num").innerText = data.total_num;
									document.getElementById("transport_num").innerText = data.transport_num;
									document.getElementById("storage_num").innerText = data.storage_num;
									document.getElementById("distribut_num").innerText = data.distribut_num;
									document.getElementById("total_price").innerText = data.total_price;
									document.getElementById("transport_price").innerText = data.transport_price;
									document.getElementById("storage_price").innerText = data.storage_price;
									document.getElementById("distribut_price").innerText = data.distribut_price;
								},
								error: function(e) {}
							})
						}
						setInterval(orderNum, 10000); //定时器
						orderNum();
					</script>
					<div id="map"></div>
					<div class="orderList">
						<div class="orderListTitle">
							<div class="orderCode">订单号</div>
							<div class="orderCode">下单时间</div>
							<div class="orderCode">发货人</div>
							<div class="orderCode">发货电话</div>
							<div class="orderCode">收货人</div>
							<div class="orderCode">收货电话</div>
						</div>
						<div class="orderListContentBox list_lh" id="list">
							<ul class="orderListContentBoxs">

							</ul>
						</div>

						<script src="js/scroll.js"></script>
						<script>
							function RenderList() {
								$.ajax({
									/***********初始化获取全部设备坐标********/
									url: API_SERVER_URL + "order_list",
									type: 'POST',
									datatype: 'jsonp',
									// data: '',
									success: function(data) {
										var resultLists = data.data;
										for (var i = 0; i < resultLists.length; i++) {
											resultLists[i]
											var str = '<li onclick="goFour(' + resultLists[i].orderSn + ',' + resultLists[i]
												.orderType + ')"   class="orderListContent" ><div class="orderCode">' +
												resultLists[i].orderSn + '</div><div class="orderCode">' + resultLists[i]
												.addTime + '</div><div class="orderCode">' + resultLists[i].senderName +
												'</div><div class="orderCode">' + resultLists[i].senderMobile +
												'</div><div class="orderCode">' + resultLists[i].receiverName +
												'</div><div class="orderCode">' + resultLists[i].receiverMobile + '</div></li>'
											$(".orderListContentBoxs").append(str);
										}
										$(function() {
											$("div.list_lh").myScroll({
												speed: 30, //数值越大，速度越慢
												rowHeight: 46 //li的高�?
											});
										});
									},
									error: function(e) {}
								})
							}

							function goFour(orderSn, orderType) {
								console.log(orderSn)
								console.log(orderType)
								window.location.href = "driverDetails.html?orderSn=" + orderSn + '&orderType=' + orderType;
							}
							RenderList()
						</script>

						</script>
					</div>
				</div>
				<div class="contentRight">
					<div class="contentRightTop">
						<span class="contentLeftTopTitle">物流金融走势图</span>
						<div id="yunfei"></div>
						<script type="text/javascript">
							var dom = document.getElementById("yunfei");
							var myChart4 = echarts.init(dom);
							option4 = {
								tooltip: {
									trigger: 'axis'
								},
								color: ["#f0be25", '#0bb3f1'],
								legend: {
									data: ['运费(元)', '代收款(元)'],
									y: '0',
									textStyle: {
										color: '#fff'
									}
								},
								grid: {
									top: '16%',
									left: '2%',
									right: '8%',
									bottom: '2%',
									containLabel: true
								},
								xAxis: {
									name: '天',
									nameTextStyle: {
										color: "#fff"
									},
									type: 'category',
									boundaryGap: true,
									axisLine: {
										lineStyle: {
											type: 'solid',
											color: '#ccc', //左边线的颜色
											width: '1' //坐标线的宽度
										},
										symbol: ['none', 'arrow']
									},
									axisLabel: {
										textStyle: {
											color: '#fff', //坐标值得具体的颜色
										},
									},
									data: []
								},
								yAxis: {
									name: '',
									nameTextStyle: {
										color: "#fff"
									},
									type: 'value',
									min: 0,
									splitNumber: 3,
									axisLine: {
										lineStyle: {
											type: 'solid',
											color: '#ccc', //左边线的颜色
											width: '1' //坐标线的宽度
										},
										symbol: ['none', 'arrow']
									},
									axisLabel: {
										textStyle: {
											color: '#fff', //坐标值得具体的颜色
										}
									},
									splitLine: {
										show: true,
										lineStyle: {
											type: 'dotted',
											color: '#666'
										},
									}
								},
								series: [{
										name: '代收款(元)',
										type: 'line',
										stack: '总量1',
										itemStyle: {
											normal: {
												color: "#f0be25",
												lineStyle: {
													color: "#f0be25"
												} /*折线颜色更改*/
											}
										},
										data: []
									},
									{
										name: '运费(元)',
										type: 'line',
										stack: '总量2',
										itemStyle: {
											normal: {
												color: "#e64b4b",
												lineStyle: {
													color: "#e64b4b"
												} /*折线颜色更改*/
											}
										},
										data: []
									},
								]
							};;
							if (option4 && typeof option4 === "object") {
								myChart4.setOption(option4, true);
							}
							myChart4.setOption(option4);
							/*窗口自适应，关键代码*/
							$(window).resize(function() {
								myChart4.resize();
							});

							function getData() {
								$.ajax({
									/***********初始化获取全部设备坐标********/
									url: API_SERVER_URL + "order_finance",
									type: 'POST',
									datatype: 'jsonp',
									// data: '',
									success: function(data) {
										myChart4.setOption({
											xAxis: {
												data: data.echatX
											},
											series: [{
												name: '运费(元)',
												data: data.totalTraffic
											}, {
												name: '代收款(元)',
												data: data.totalColl
											}]
										})
									},
									error: function(e) {}
								})
							}
							setInterval(getData, 10000); //定时器
							getData();
						</script>
					</div>
					<div class="contentRightMiddle">
						<span class="contentRightMiddleTitle">网点发货量排行</span>
						<div id="daishou"></div>
						<script type="text/javascript">
							var dom = document.getElementById("daishou");
							var myChart5 = echarts.init(dom);
							option5 = {
								tooltip: {
									trigger: 'axis'
								},
								grid: {
									top: '16%',
									left: '2%',
									right: '8%',
									bottom: '2%',
									containLabel: true
								},
								xAxis: {
									name: '',
									nameTextStyle: {
										color: "#fff"
									},
									type: 'category',
									boundaryGap: true,
									axisLine: {
										lineStyle: {
											type: 'solid',
											color: '#ccc', //左边线的颜色
											width: '1' //坐标线的宽度
										},
										symbol: ['none', 'arrow']
									},
									axisLabel: {
										textStyle: {
											color: '#fff', //坐标值得具体的颜色
										},
									},
									data: []
								},
								yAxis: {
									name: 'kg',
									nameTextStyle: {
										color: "#fff"
									},
									type: 'value',
									min: 0,
									splitNumber: 3,
									axisLine: {
										lineStyle: {
											type: 'solid',
											color: '#ccc', //左边线的颜色
											width: '1' //坐标线的宽度
										},
										symbol: ['none', 'arrow']
									},
									axisLabel: {
										textStyle: {
											color: '#fff', //坐标值得具体的颜色
										}
									},
									splitLine: {
										show: true,
										lineStyle: {
											type: 'dotted',
											color: '#666'
										},
									},
								},
								series: [{
									name: '货量',
									type: 'bar',
									stack: '总量1',
									barWidth: 20,
									itemStyle: { //上方显示数值
										normal: {
											label: {
												show: true, //开启显示
												position: 'top', //在上方显示
												textStyle: { //数值样式
													color: '#ffffff',
													fontSize: 14
												}
											}
										}
									},
									data: []
								}, {
									name: '',
									type: 'line',
									stack: '数量',
									itemStyle: {
										normal: {
											color: "#f0be25",
											lineStyle: {
												color: "#f0be25"
											} /*折线颜色更改*/
										}
									},
									data: []
								}]
							};;
							if (option5 && typeof option5 === "object") {
								myChart5.setOption(option5, true);
							}
							myChart5.setOption(option5);
							/*窗口自适应，关键代码*/
							$(window).resize(function() {
								myChart5.resize();
							});

							function getData() {
								$.ajax({
									/***********初始化获取全部设备坐标********/
									url: API_SERVER_URL + "order_outlet_shipments",
									type: 'POST',
									datatype: 'jsonp',
									success: function(data) {
										myChart5.setOption({
											xAxis: {
												data: data.echatX
											},
											series: [{
												name: '货量',
												data: data.echatY
											}, {
												name: '',
												data: data.echatY
											}, ]
										})
									},
									error: function(e) {}
								})
							}
							setInterval(getData, 10000); //定时器
							getData();
						</script>
					</div>
					<div class="contentRightBottom">
						<span class="contentRightBottomTitle">累计发货排行</span>
						<div id="huoyue">
							<div class="huoyueTitle">
								<div class="huoyueTitleCol">排名</div>
								<div class="huoyueTitleCol">姓名</div>
								<div class="huoyueTitleCol">电话</div>
								<div class="huoyueTitleCol">下单量</div>
								<div class="huoyueTitleCol">目的地</div>
							</div>
							<div class="huoyueContentBox">
								<div class="huoyueContent" v-for="(item, index) in result" :key="index">
									<div class="huoyueTitleCol"><span
											:class="getRankCls(index)">{{getRankText(index)}}</span></div>
									<div class="huoyueTitleCol">{{item.senderName}}</div>
									<div class="huoyueTitleCol">{{item.senderMobile}}</div>
									<div class="huoyueTitleCol">{{item.orderNum}}</div>
									<div class="huoyueTitleCol" :title="item.totalArea">{{item.totalArea}}</div>
								</div>
							</div>
						</div>
						<script>
							new Vue({
								el: '#huoyue',
								data: {
									result: [],
								},
								mounted: function() {
									this.getData();
								},
								methods: {
									getRankCls(index) {
										if (index <= 2) {
											return `icon icon${index}`
										} else {
											return 'icon icons'
										}
									},
									getRankText(index) {
										if (index > 2) {
											return index + 1
										}
									},
									getData: function() {
										var that = this
										$.ajax({
											/***********初始化获取全部设备坐标********/
											url: API_SERVER_URL + "order_ship_rank",
											type: 'POST',
											datatype: 'jsonp',
											// data: '',
											success: function(data) {
												that.result = data.data
											},
											error: function(e) {
												// console.log(e)
											}
										})
									}
								},
							})
						</script>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			openWebSocket()
			var websocket = null;

			function openWebSocket() {
				var url = API_SERVER_URLS + "admin";
				//判断当前浏览器是否支持WebSocket
				if ('WebSocket' in window) {
					websocket = new WebSocket(url);
				} else {
					console.log('当前浏览器 Not support websocket')
				}
				//连接发生错误的回调方法
				websocket.onerror = function() {
					setMessageInnerConsole("WebSocket连接发生错误");
				};
				//连接成功建立的回调方法
				websocket.onopen = function() {
					setMessageInnerConsole("WebSocket连接成功");
				}
				//接收到消息的回调方法
				websocket.onmessage = function(event) {
					setMessageInnerHTML(event.data);
				}
				//连接关闭的回调方法
				websocket.onclose = function() {
					setMessageInnerConsole("WebSocket连接关闭");
				}
			}
			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function() {
				closeWebSocket();
			}

			function setMessageInnerHTML(data) {
				var dataObj = eval("(" + data + ")");
				alert(dataObj.receive + "-" + dataObj.send + "有新订单啦！")
			}
			//将消息显示在网页上
			function setMessageInnerConsole(innerHTML) {
				// console.log(innerHTML)
				//document.getElementById('message').innerHTML += innerHTML + '<br/>';
			}
			//关闭WebSocket连接
			function closeWebSocket() {
				websocket.onclose = function() {
					setMessageInnerConsole("WebSocket连接关闭");
				}
			}
		</script>
		<script type="text/javascript">
			var dom = document.getElementById("map");
			var myChart = echarts.init(dom);
			var data = {
				'临沂': [116.4551, 40.2539],
				'上海': [121.4648, 31.2891],
				'东莞': [113.8953, 22.901],
				'东营': [118.7073, 37.5513],
				'中山': [113.4229, 22.478],
				'临汾': [111.4783, 36.1615],
				'丹东': [124.541, 40.4242],
				'丽水': [119.5642, 28.1854],
				'乌鲁木齐': [87.9236, 43.5883],
				'佛山': [112.8955, 23.1097],
				'保定': [115.0488, 39.0948],
				'兰州': [103.5901, 36.3043],
				'包头': [110.3467, 41.4899],
				'北海': [109.314, 21.6211],
				'南京': [118.8062, 31.9208],
				'南宁': [108.479, 23.1152],
				'南昌': [116.0046, 28.6633],
				'南通': [121.1023, 32.1625],
				'厦门': [118.1689, 24.6478],
				'台州': [121.1353, 28.6688],
				'合肥': [117.29, 32.0581],
				'呼和浩特': [111.4124, 40.4901],
				'咸阳': [108.4131, 34.8706],
				'哈尔滨': [127.9688, 45.368],
				'唐山': [118.4766, 39.6826],
				'嘉兴': [120.9155, 30.6354],
				'大同': [113.7854, 39.8035],
				'大连': [122.2229, 39.4409],
				'天津': [117.4219, 39.4189],
				'太原': [112.3352, 37.9413],
				'威海': [121.9482, 37.1393],
				'宁波': [121.5967, 29.6466],
				'宝鸡': [107.1826, 34.3433],
				'宿迁': [118.5535, 33.7775],
				'常州': [119.4543, 31.5582],
				'广州': [113.5107, 23.2196],
				'廊坊': [116.521, 39.0509],
				'延安': [109.1052, 36.4252],
				'张家口': [115.1477, 40.8527],
				'徐州': [117.5208, 34.3268],
				'德州': [116.6858, 37.2107],
				'惠州': [114.6204, 23.1647],
				'成都': [103.9526, 30.7617],
				'扬州': [119.4653, 32.8162],
				'承德': [117.5757, 41.4075],
				'拉萨': [91.1865, 30.1465],
				'无锡': [120.3442, 31.5527],
				'日照': [119.2786, 35.5023],
				'昆明': [102.9199, 25.4663],
				'杭州': [119.5313, 29.8773],
				'枣庄': [117.323, 34.8926],
				'柳州': [109.3799, 24.9774],
				'株洲': [113.5327, 27.0319],
				'武汉': [114.3896, 30.6628],
				'汕头': [117.1692, 23.3405],
				'江门': [112.6318, 22.1484],
				'沈阳': [123.1238, 42.1216],
				'沧州': [116.8286, 38.2104],
				'河源': [114.917, 23.9722],
				'泉州': [118.3228, 25.1147],
				'泰安': [117.0264, 36.0516],
				'泰州': [120.0586, 32.5525],
				'济南': [117.1582, 36.8701],
				'济宁': [116.8286, 35.3375],
				'海口': [110.3893, 19.8516],
				'淄博': [118.0371, 36.6064],
				'淮安': [118.927, 33.4039],
				'深圳': [114.5435, 22.5439],
				'清远': [112.9175, 24.3292],
				'温州': [120.498, 27.8119],
				'渭南': [109.7864, 35.0299],
				'湖州': [119.8608, 30.7782],
				'湘潭': [112.5439, 27.7075],
				'滨州': [117.8174, 37.4963],
				'潍坊': [119.0918, 36.524],
				'烟台': [120.7397, 37.5128],
				'玉溪': [101.9312, 23.8898],
				'珠海': [113.7305, 22.1155],
				'盐城': [120.2234, 33.5577],
				'盘锦': [121.9482, 41.0449],
				'石家庄': [114.4995, 38.1006],
				'福州': [119.4543, 25.9222],
				'秦皇岛': [119.2126, 40.0232],
				'绍兴': [120.564, 29.7565],
				'聊城': [115.9167, 36.4032],
				'肇庆': [112.1265, 23.5822],
				'舟山': [122.2559, 30.2234],
				'苏州': [120.6519, 31.3989],
				'莱芜': [117.6526, 36.2714],
				'菏泽': [115.6201, 35.2057],
				'营口': [122.4316, 40.4297],
				'葫芦岛': [120.1575, 40.578],
				'衡水': [115.8838, 37.7161],
				'衢州': [118.6853, 28.8666],
				'西宁': [101.4038, 36.8207],
				'西安': [109.1162, 34.2004],
				'贵阳': [106.6992, 26.7682],
				'连云港': [119.1248, 34.552],
				'邢台': [114.8071, 37.2821],
				'邯郸': [114.4775, 36.535],
				'郑州': [113.4668, 34.6234],
				'鄂尔多斯': [108.9734, 39.2487],
				'重庆': [107.7539, 30.1904],
				'金华': [120.0037, 29.1028],
				'铜川': [109.0393, 35.1947],
				'银川': [106.3586, 38.1775],
				'镇江': [119.4763, 31.9702],
				'长春': [125.8154, 44.2584],
				'长沙': [113.0823, 28.2568],
				'长治': [112.8625, 36.4746],
				'阳泉': [113.4778, 38.0951],
				'青岛': [120.4651, 36.3373],
				'韶关': [113.7964, 24.7028],
				'北京': [116.509448, 39.849036],
				'新疆': [87.651297, 43.846898]
			};

			var geoCoordMap = {
				'临沂': [118.3118, 35.2936],
				'临汾': [111.4783, 36.1615],
				'上海': [121.4648, 31.2891],
				'东莞': [113.8953, 22.901],
				'东营': [118.7073, 37.5513],
				'中山': [113.4229, 22.478],
				'丹东': [124.541, 40.4242],
				'丽水': [119.5642, 28.1854],
				'乌鲁木齐': [87.9236, 43.5883],
				'佛山': [112.8955, 23.1097],
				'保定': [115.0488, 39.0948],
				'兰州': [103.5901, 36.3043],
				'包头': [110.3467, 41.4899],
				'北海': [109.314, 21.6211],
				'南京': [118.8062, 31.9208],
				'南宁': [108.479, 23.1152],
				'南昌': [116.0046, 28.6633],
				'南通': [121.1023, 32.1625],
				'厦门': [118.1689, 24.6478],
				'台州': [121.1353, 28.6688],
				'合肥': [117.29, 32.0581],
				'呼和浩特': [111.4124, 40.4901],
				'咸阳': [108.4131, 34.8706],
				'哈尔滨': [127.9688, 45.368],
				'唐山': [118.4766, 39.6826],
				'嘉兴': [120.9155, 30.6354],
				'大同': [113.7854, 39.8035],
				'大连': [122.2229, 39.4409],
				'天津': [117.4219, 39.4189],
				'太原': [112.3352, 37.9413],
				'威海': [121.9482, 37.1393],
				'宁波': [121.5967, 29.6466],
				'宝鸡': [107.1826, 34.3433],
				'宿迁': [118.5535, 33.7775],
				'常州': [119.4543, 31.5582],
				'广州': [113.5107, 23.2196],
				'廊坊': [116.521, 39.0509],
				'延安': [109.1052, 36.4252],
				'张家口': [115.1477, 40.8527],
				'徐州': [117.5208, 34.3268],
				'德州': [116.6858, 37.2107],
				'惠州': [114.6204, 23.1647],
				'成都': [103.9526, 30.7617],
				'扬州': [119.4653, 32.8162],
				'承德': [117.5757, 41.4075],
				'拉萨': [91.1865, 30.1465],
				'无锡': [120.3442, 31.5527],
				'日照': [119.2786, 35.5023],
				'昆明': [102.9199, 25.4663],
				'杭州': [119.5313, 29.8773],
				'枣庄': [117.323, 34.8926],
				'柳州': [109.3799, 24.9774],
				'株洲': [113.5327, 27.0319],
				'武汉': [114.3896, 30.6628],
				'汕头': [117.1692, 23.3405],
				'江门': [112.6318, 22.1484],
				'沈阳': [123.1238, 42.1216],
				'沧州': [116.8286, 38.2104],
				'河源': [114.917, 23.9722],
				'泉州': [118.3228, 25.1147],
				'泰安': [117.0264, 36.0516],
				'泰州': [120.0586, 32.5525],
				'济南': [117.1582, 36.8701],
				'济宁': [116.8286, 35.3375],
				'海口': [110.3893, 19.8516],
				'淄博': [118.0371, 36.6064],
				'淮安': [118.927, 33.4039],
				'深圳': [114.5435, 22.5439],
				'清远': [112.9175, 24.3292],
				'温州': [120.498, 27.8119],
				'渭南': [109.7864, 35.0299],
				'湖州': [119.8608, 30.7782],
				'湘潭': [112.5439, 27.7075],
				'滨州': [117.8174, 37.4963],
				'潍坊': [119.0918, 36.524],
				'烟台': [120.7397, 37.5128],
				'玉溪': [101.9312, 23.8898],
				'珠海': [113.7305, 22.1155],
				'盐城': [120.2234, 33.5577],
				'盘锦': [121.9482, 41.0449],
				'石家庄': [114.4995, 38.1006],
				'福州': [119.4543, 25.9222],
				'秦皇岛': [119.2126, 40.0232],
				'绍兴': [120.564, 29.7565],
				'聊城': [115.9167, 36.4032],
				'肇庆': [112.1265, 23.5822],
				'舟山': [122.2559, 30.2234],
				'苏州': [120.6519, 31.3989],
				'莱芜': [117.6526, 36.2714],
				'菏泽': [115.6201, 35.2057],
				'营口': [122.4316, 40.4297],
				'葫芦岛': [120.1575, 40.578],
				'衡水': [115.8838, 37.7161],
				'衢州': [118.6853, 28.8666],
				'西宁': [101.4038, 36.8207],
				'西安': [109.1162, 34.2004],
				'贵阳': [106.6992, 26.7682],
				'连云港': [119.1248, 34.552],
				'邢台': [114.8071, 37.2821],
				'邯郸': [114.4775, 36.535],
				'郑州': [113.4668, 34.6234],
				'鄂尔多斯': [108.9734, 39.2487],
				'重庆': [107.7539, 30.1904],
				'金华': [120.0037, 29.1028],
				'铜川': [109.0393, 35.1947],
				'银川': [106.3586, 38.1775],
				'镇江': [119.4763, 31.9702],
				'长春': [125.8154, 44.2584],
				'长沙': [113.0823, 28.2568],
				'长治': [112.8625, 36.4746],
				'阳泉': [113.4778, 38.0951],
				'青岛': [120.4651, 36.3373],
				'韶关': [113.7964, 24.7028],
				'北京': [116.509448, 39.849036],
				'新疆': [87.651297, 43.846898],
				'哈密': [93.44, 42.78],
				'阿克苏': [80.19, 41.09],
				'阿勒泰': [88.12, 41.50],
				'阿图什': [76.08, 39.42],
				'博乐': [82.08, 44.57],
				'昌吉': [87.18, 44.02],
				'阜康': [87.58, 44.09],
				'和田': [79.55, 37.09],
				'克拉玛依': [84.51, 45.36],
				'喀什': [75.59, 39.30],
				'库尔勒': [86.07, 41.16],
				'奎屯': [84.56, 44.27],
				'石河子': [86.00, 44.18],
				'塔城': [46.46, 82.59],
				'吐鲁番': [89.11, 42.54],
				'伊宁': [81.20, 43.55]
			};
			var BJData = [];

			function getData() {
				$.ajax({
					/***********初始化获取全部设备坐标********/
					url: API_SERVER_URL + "network_list",
					type: 'POST',
					header: {
						"Access-Control-Allow-Origin": '*'
					},
					async: true,
					datatype: 'jsonp',
					success: function(data) {
						BJData = [];
						var provinces = data.bourn
						var data = [];
						for (var i = 0; i < provinces.length; i++) {
							var serie = [];
							var item = {
								name: '临沂'
							}
							var item2 = {
								name: provinces[i].outlets_name,
								value: provinces[i].amount
							}
							serie.push(item);
							serie.push(item2);
							data.push(serie)
							BJData.push(serie);
						}
						drawPaint();
					},
					error: function(e) {}
				})
			}
			setInterval(function() {
				getData();
			}, 10000); //定时器
			var convertData = function(data) {
				var res = [];
				for (var i = 0; i < data.length; i++) {
					var dataItem = data[i];
					var fromCoord = geoCoordMap[dataItem[0].name];
					var toCoord = geoCoordMap[dataItem[1].name];
					if (fromCoord && toCoord) {
						res.push({
							fromName: dataItem[0].name,
							toName: dataItem[1].name,
							numValue: dataItem[1].value,
							coords: [fromCoord, toCoord]
						});
					}
				}
				return res;
			};

			function drawPaint() {
				console.log(BJData);
				var color = ['#ffa022'];
				var series = [];
				var LineColor = ['#ff0000', '#e8db0f', '#33e27d', '#33e27d']; //绿  黄  红
				[
					['临沂', BJData]
				].forEach(function(item, i) {
					series.push({
						name: item[0],
						type: 'effectScatter',
						coordinateSystem: 'geo',
						zlevel: 11,
						rippleEffect: {
							brushType: 'stroke'
						},
						itemStyle: {
							normal: {
								color: '#ffffff',

							}
						},
						label: {
							normal: {
								show: true,
								position: 'right',
								formatter: '{b}',
								textStyle: {
									fontSize: 16
								}
							}
						},
						data: item[1].map(function(dataItem) {
							return {
								name: dataItem[0].name,
								value: geoCoordMap[dataItem[0].name].concat([dataItem[1].value])
							};
						})
					}, {
						name: item[0],
						type: 'lines',
						zlevel: 1,
						show: true,
						position: 'right',
						formatter: '{b}',
						effect: {
							show: true,
							period: 6,
							trailLength: 1.7,
							color: '#fff',
							shadowBlur: 0,
							symbolSize: 0

						},
						lineStyle: {
							normal: {
								color: function(params) {
									let num = params.data.numValue; //这是数据中的参数，可改
									console.log(params.data.numValue)
									if (num > 20000) {
										return LineColor[0];
									} else if (num > 10000) {
										return LineColor[1];
									} else if (num > 5000) {
										return LineColor[2];
									} else {
										return LineColor[3];
									}
								},
								width: 1,
								curveness: 0.2
							}
						},
						data: convertData(item[1])
					}, {
						name: item[0],
						type: 'lines',
						zlevel: 2,
						symbol: ['none', 'arrow'],
						symbolSize: 10,
						effect: {
							show: true,
							period: 6,
							trailLength: 0,
							color: '#ffa022',
							symbol: 'image://images/货车.png',
							symbolSize: [15, 30]
						},
						itemStyle: {
							color: color[i]
						},

						lineStyle: {
							normal: {
								color: function(params) {
									let num = params.data.numValue;
									if (num > 20000) {
										return LineColor[0];
									} else if (num > 10000) {
										return LineColor[1];
									} else if (num > 5000) {
										return LineColor[2];
									} else {
										return LineColor[3];
									}
								},
								width: 0.2,
								opacity: 0.4,
								curveness: 0.2
							}
						},
						data: convertData(item[1])
					}, {
						name: item[0],
						type: 'effectScatter',
						coordinateSystem: 'geo',
						zlevel: 2,
						rippleEffect: {
							brushType: 'stroke'
						},
						label: {
							show: true,
							position: 'right',
							formatter: '{b}'
						},
						itemStyle: {
							normal: {
								color: function(params) {
									let num = params.value[2];
									if (num > 20000) {
										return LineColor[0];
									} else if (num > 10000) {
										return LineColor[1];
									} else if (num > 5000) {
										return LineColor[2];
									} else {
										return LineColor[3];
									}
								}
							}
						},
						data: item[1].map(function(dataItem) {
							console.log(dataItem[1].name);
							if (geoCoordMap[dataItem[1].name]) {
								return {
									name: dataItem[1].name,
									value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
								};
							} else {
								return '';
							}
						})
					});
				});
				option = {
					title: {
						text: '全国区域网点分布图',
						subtext: '',
						top: 20,
						left: 'center',
						textStyle: {
							fontSize: 24,
							color: '#ffffff'
						}
					},
					tooltip: {
						trigger: 'item'
					},
					geo: {
						map: 'china',
						label: {
							show: false
						},
						roam: true,
						itemStyle: {
							normal: {
								borderColor: 'rgba(147, 235, 248, 1)',
								borderWidth: 1,
								areaColor: {
									type: 'radial',
									x: 0.5,
									y: 0.6,
									r: 0.8,
									colorStops: [{
										offset: 0,
										color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
									}],
									globalCoord: false // 缺省为 false
								},
								shadowColor: 'rgba(128, 217, 248, 1)',
								shadowOffsetX: -2,
								shadowOffsetY: 2,
								shadowBlur: 10
							},
							emphasis: {
								areaColor: '#389BB7',
								borderWidth: 0
							}
						}
					},
					series: series
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
				/*窗口自适应，关键代码*/
				$(window).resize(function() {
					myChart.clear()
					myChart.resize();
					myChart.setOption(option, true);
				});
			}
		</script>
	</body>
</html>
